<template>
	<gui-page :customHeader="true" headerStyle='background-image: linear-gradient(to right,   #f15525, #e15324);' statusBarStyle='background-image: linear-gradient(to right,   #f15525, #e15324);'>
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<gui-header-leading :onlyBack="true" buttonStyle="color:#ffffff;"></gui-header-leading>
				<view class="gui-flex1 gui-text-center" style="margin-right: 40rpx;">
					<text class="gui-h4 gui-ellipsis gui-primary-color gui-color-white">我的收益</text>
				</view>
				<!-- <gui-mp-menu-spacing></gui-mp-menu-spacing> -->
			</view>
		</view>
		<view slot="gBody" class="z-body" :style="{width:'750rpx'}">
			<view class="z-top-h">
				<view class="gui-flex gui-margin z-top">
					<view class="z-left">
						<view class="z-num">{{user.money}}</view>
						<view class="z-title">账户余额(元)</view>
						<view class="gui-flex" style="margin-top: 20rpx;">
							<view style="margin-right: 100rpx;">
								<view class="z-num1">{{user.money_zong}}</view>
								<view class="z-title1">获得总金额(元)</view>
							</view>
							<view class="">
								<view class="z-num1">{{user.money_zong - user.money}}</view>
								<view class="z-title1">已经提现金额(元)</view>
							</view>
						</view>
						
					</view>
					<view class="z-right" @tap="dep">
						<text>去提现</text>
					</view>
				</view>
				<view class="gui-padding z-warning">系统会自动更新昨日收益，可能会有延迟。</view>
			</view>
			<view class="gui-bg-white z-list">
				<view class="gui-text-center gui-color-red z-notice">每月15号可进行提现</view>
				<view class="z-list-item gui-flex" v-for="(item,index) in list" :key='item.id'>
					<view class="z-list-item-left">
						<view class="z-source" style="color: #00e870;" v-if="item.type==1">团购奖励金</view>
						<view class="z-source" style="color: #00aaff;" v-if="item.type==3">商品奖励金</view>
						<view class="z-source" style="color: #e15324;" v-if="item.type==2" >提现金额</view>
						<view class="gui-color-gray z-time">{{item.time}}</view>
					</view>
					<view class="z-list-item-right1" v-if="item.type==1">+ {{item.money}}</view>
					<view class="z-list-item-right1" v-if="item.type==3">+ {{item.money}}</view>
					<view class="z-list-item-right2" v-if="item.type==2">- {{item.money}}</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>
<script>
export default {
	data() {
		return {
			mainHeight   : 100,
			list:[],
			user:{},
			page:1
		}
	},
	onLoad:function(){
		uni.common.post(
			uni.common.apiServer + 'my',
			{
				type: 'get_my_info'
			},
			false,
			res => {
				if (res.code == 1) {
					this.user = res.data
				} else {
					uni.showToast({
						icon: 'none',
						title: '尚未登陆，请登陆后购买'
					});
				}
			},
			e => {
				console.log(e);
			}
		);	
	},
	onReachBottom(){
		this.getdata()
	},
	onShow() {
		this.page=1
		this.getdata()
	},
	methods: {
		getdata(){
			uni.common.post(
				uni.common.apiServer + 'my',
				{
					type: 'get_money_list',
					page:this.page
				},
				false,
				res => {
					if (res.code == 1) {
						let list=res.data
						for (let i in list) {
							
						}
						if(this.page==1){
							this.list=list
						}else{
							this.list = this.list.concat(list);
						}
						this.page++
					} else {
						if(this.page!=1){
							uni.showToast({
								icon: 'none',
								title: '已经加载全部'
							});
						}
					}
				},
				e => {
					console.log(e);
				}
			);	
		},
		dep:function(){
			uni.navigateTo({
				url:'/pages/my/deposit'
			})
		}
	}
}
</script>
<style>
	.z-body{
		background-image: linear-gradient(to right, #f15525, #e15324);
	}
	.z-top-h{
		min-height: 22vh;
	}
	.z-top{
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #fff;
	}
	.z-title{
		color: #FFC714;
		line-height: 2.2;
		font-size: 26rpx;
	}
	.z-title1{
		color: #FFC714;
		line-height: 2.2;
		font-size: 24rpx;
	}
	.z-warning{
		color: #FFC714;
		line-height: 4.2;
		font-size: 26rpx;
	}
	.z-left{
		width: 480rpx;
		margin-right: 30rpx;
	}
	.z-num{
		font-size: 72rpx;
		color: #fff;
	}
	.z-num1{
		font-size: 40rpx;
		color: #fff;
	}
	.z-right{
		width: 180rpx;
		text-align: center;
		padding-top: 30rpx;
	}
	.z-right text{
		color: #ffffff;
		background-image: linear-gradient(to right, #d8b00e, #e19e0c);
		padding: 15rpx 30rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
	}
	.z-list{
		padding-top: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
	}
	.z-notice{
		border-bottom: 1rpx solid #F1F2F3;
		padding-bottom: 30rpx;
		line-height: 2.2;
		font-size: 31rpx;
	}
	.z-list-item{
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #F1F2F3;
		margin: 0 30rpx;
	}
	.z-list-item-left{
		width: 500rpx;
	}
	.z-source{
		line-height: 2.5;
		font-size: 26rpx;
	}
	.z-time{
		font-size: 26rpx;
	}
	.z-list-item-right1{
		width: 190rpx;
		text-align: right;
		color: #fb6624;
		font-size: 36rpx;
		line-height: 2.4;
	}
	.z-list-item-right2{
		width: 190rpx;
		text-align: right;
		font-size: 36rpx;
	}
</style>